<template>
  <el-dialog
    title="选择商品"
    v-model="dialogVisible"
    width="80%"
    :before-close="handleClose"
    append-to-body
    destroy-on-close
    style="position: relative;top: -10%;"
  >
    <div class="select-goods-container">
      <!-- 搜索区域 -->
      <div class="search-area">
        <el-input
          v-model="searchForm.goods_name"
          placeholder="商品名称"
          clearable
          class="search-input"
        />
        <el-select
          v-model="searchForm.category_id"
          placeholder="商品分类"
          clearable
          class="search-select"
        >
          <el-option
            v-for="item in categoryOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
        <el-select
          v-model="searchForm.brand_id"
          placeholder="品牌"
          clearable
          class="search-select"
        >
          <el-option
            v-for="item in brandOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
      </div>

      <!-- 表格区域 -->
      <div class="table-container">
        <el-table
          ref="multipleTable"
          :data="goodsList"
          border
          style="width: 100%"
          :row-key="getRowKeys"
          max-height="620px"
          @select="handleSelectionChange" 
          @select-all="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"  reserve-selection/>
          <el-table-column label="ID" prop="id" width="70" align="center" />
          <el-table-column prop="product_name" label="产品名" width="180" />
          <el-table-column
            prop="goods_name"
            label="商品名称"
            min-width="200"
            show-overflow-tooltip
          />
          <el-table-column label="商品图片" width="120" align="center">
            <template #default="scope">
              <div class="product-image">
                <img
                  v-if="scope.row.goods_image"
                  :src="scope.row.goods_image"
                  alt="商品图片"
                />
                <el-icon v-else><Picture /></el-icon>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="goods_spec_value_ids"
            label="规格型号"
            min-width="200"
            show-overflow-tooltip
          >
            <template #default="scope">
              <span
                v-for="(spec, index) in scope.row.goods_spec_name"
                :key="spec"
              >
                <span style="margin-right: 6rpx">
                  {{ scope.row.goods_spec_name[index] }}:{{
                    scope.row.goods_spec_value_name[index]
                  }}
                </span>
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="category.name" label="商品分类" width="120" />
          <el-table-column prop="brand.name" label="品牌" width="120" />
          <el-table-column prop="factory_price" label="￥厂价" width="90" />
          <el-table-column prop="discount_price" label="￥折扣价" width="90" />
        </el-table>
      </div>

      <!-- 分页区域 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="searchForm.page"
          v-model:page-size="searchForm.limit"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="searchForm.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 底部按钮 -->
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
  import { ref, reactive, onMounted, defineProps, defineEmits } from 'vue'
  import { Picture } from '@element-plus/icons-vue'
  import { ElMessage } from 'element-plus'
  import { getProxySelectGoods, getcateList, getBrandList } from '@/api/goods'
  const dialogVisible = ref(false)

  const emit = defineEmits(['confirm'])
  const goodsList = ref([])
  const getGoodsList = async () => {
    const { data } = await getProxySelectGoods(searchForm)
    searchForm.total = data.total
    goodsList.value = data.data
    console.log('获取商品数据', goodsList.value)
  }
  const getRowKeys = (row) => {
    return row.id
  }

  const open = (id) => {
    dialogVisible.value = true
    searchForm.supplier_shop_id = id
    getGoodsList(searchForm)
  }

  // 搜索表单
  const searchForm = reactive({
    goods_name: '',
    supplier_shop_id: '',
    category_id: '',
    brand_id: '',
    page: 1,
    limit: 10,
    total: 0,
  })

  // 分类选项
  const categoryOptions = ref([])

  // 品牌选项
  const brandOptions = ref([])

  const handleSizeChange = (val) => {
    searchForm.limit = val
    getGoodsList()
  }

  const handleCurrentChange = (val) => {
    searchForm.page = val
    getGoodsList()
  }

  // 表格选择
  const multipleSelection = ref([])
  const handleSelectionChange = (val) => {
    multipleSelection.value = val
  }

  // 搜索
  const handleSearch = () => {
    searchForm.page = 1
    getGoodsList()
  }

  // 关闭对话框
  const handleClose = () => {
    dialogVisible.value = false
  }

  // 确认选择
  const handleConfirm = () => {
    if (multipleSelection.value.length === 0) {
      ElMessage.warning('请至少选择一个商品')
      return
    }
    emit('confirm', multipleSelection.value)
    dialogVisible.value = false
  }
  // 请求分类和品牌数据
  const getCateListData = async () => {
    const { data } = await getcateList()
    categoryOptions.value = data.data
  }

  const getBrandListData = async () => {
    const { data } = await getBrandList()
    brandOptions.value = data.data
  }
  onMounted(async () => {
    await getCateListData()
    await getBrandListData()
  })
  defineExpose({
    open,
  })
</script>

<style scoped>
  .select-goods-container {
    padding: 0 10px;
  }

  .search-area {
    display: flex;
    margin-bottom: 20px;
    align-items: center;
  }

  .search-input {
    width: 220px;
    margin-right: 10px;
  }

  .search-select {
    width: 220px;
    margin-right: 10px;
  }

  .table-container {
    margin-bottom: 20px;
  }

  .pagination-container {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
  }

  .product-image {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    background-color: #f5f7fa;
    border-radius: 4px;
    overflow: hidden;
  }

  .product-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  .product-image .el-icon {
    font-size: 24px;
    color: #909399;
  }

  .dialog-footer {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .dialog-footer .el-button {
    min-width: 100px;
  }
</style>
